<template>
	<Layout showFooter>
		<template #title>客服</template>
		<ScrollRefresher>
			<view class="inline-flex fill p30">
				<view class="inline-flex fill chat-item">
					<image class="inline-flex chat-item__portrait"></image>
					<view class="chat-item__content">
						请在此评价律师服务，科光真实的评价有利于其他客服的判断，谢谢您
					</view>
				</view>
			</view>

			<view class="inline-flex fill p30">
				<view class="inline-flex fill chat-item opposite">
					<image class="inline-flex chat-item__portrait"></image>
					<view class="chat-item__content">
						请在此评价律师服务，科光真实的评价有利于其他客服的判断，谢谢您
					</view>
				</view>
			</view>
		</ScrollRefresher>

		<template #footer>
			<view class="inline-flex fill jcsb chat-footer p30">
				<view class="chat-footer__input">
					<u-input :style="{width:'100%'}" height="40" :auto-height="true" type="textarea" maxlength="500"
						v-model="formData.content"
						:custom-style="{width:'100%',backgroundColor:'#F2F2F2',padding:'16rpx',borderRadius: '16rpx'}"
						placeholder="请输入"></u-input>
				</view>
				<view class="inline-flex chat-footer__send">
					<u-button style="width:140rpx;" size="medium" type="primary"
						:custom-style="{width:'140rpx'}">发送</u-button>
				</view>
			</view>
		</template>
	</Layout>
</template>

<script lang="ts" setup>
	import Layout from '@/components/layout/layout.vue';
	import ScrollRefresher from '@/components/scroll-refresher/scroll-refresher.vue';
	import { ref } from 'vue';
	const formData = ref({
		content: ''
	});
</script>

<style scope lang="scss">
	.chat-item {
		&__portrait {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: wheat;
		}

		&__content {
			width: 440rpx;
			margin: 14rpx 0 0 20rpx;
			padding: 20rpx;
			border-radius: 4rpx 20rpx 20rpx 20rpx;
			background: #FFF;
			color: #000000;
			font-size: 28rpx;
			font-weight: 400;
		}

		&.opposite {
			flex-direction: row-reverse;

			.chat-item__content {
				margin: 14rpx 20rpx 0 0;
				border-radius: 20rpx 4rpx 20rpx 20rpx;
				background: #FF710A;
				color: white;
			}
		}
	}

	.chat-footer {
		background-color: white;

		&__input {
			border-radius: 16rpx;
			width: 528rpx;
			max-height: 300rpx;
			overflow-y: auto;
		}

		&__send {
			align-items: flex-end;
		}
	}
</style>